<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>小象湾托育平台管理系统</title>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.3.0}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">
        label.error {
            position: inherit;
        }

        canvas, progress, video {
            position: absolute;
        }

        body {
            width:100%;
            height:100%;
            margin: 0;
            padding: 0;
            background: black;
            overflow: hidden;
            position: absolute;
        }

        .signinpanel1 {
            width:750px;
            margin:15% auto 0;
            color:rgba(255,255,255,.95)
        }
        .signinpanel1 .logopanel {
            float:none;
            width:auto;
            padding:0;
            background:0 0
        }
        .signinpanel1 .signin-info ul {
            list-style:none;
            padding:0;
            margin:20px 0
        }
        .signinpanel1 .form-control {
            display:block;
            margin-top:15px
        }
        .signinpanel1 .uname {
            background:#fff url(../img/user.png) no-repeat 95% center;
            color:#333
        }
        .signinpanel1 .pword {
            background:#fff url(../img/locked.png) no-repeat 95% center;
            color:#333
        }
        .signinpanel1 .code {
            background: #fff no-repeat 95% center;color:#333; margin:0 0 15px 0;
        }
        .signinpanel1 .btn {
            margin-top:15px
        }
        .signinpanel1 form {
            background:rgba(255,255,255,.2);
            border:1px solid rgba(255,255,255,.3);
            -moz-box-shadow:0 3px 0 rgba(12,12,12,.03);
            -webkit-box-shadow:0 3px 0 rgba(12,12,12,.03);
            box-shadow:0 3px 0 rgba(12,12,12,.03);
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
            border-radius:3px;
            padding:30px
        }
    </style>
    <script>
        if (window.top !== window.self) {
            alert('未登录或登录超时。请重新登录');
            window.top.location = window.location
        };
    </script>

    <script th:src="@{/js/line/three.min.js}"></script>
    <script th:src="@{/js/line/TweenMax.min.js}"></script>
</head>
<body>
<div id="mainContainer" name="mainContainer"></div>
<div class="signinpanel1">
    <div class="row">
        <div class="col-sm-5" style="margin:0 auto !important; float:initial !important;">
            <form id="signupForm" autocomplete="off">
                <h4 class="no-margins" style="text-align: center">登录：</h4>
                <input type="text" id="username" name="username" class="form-control uname" placeholder="用户名"
                       />
                <input type="password" id="password" name="password" class="form-control pword" placeholder="密码"
                       />
                <div class="row m-t" th:if="${captchaEnabled==true}">
                    <div class="col-xs-6">
                        <input type="text" name="validateCode" class="form-control code" placeholder="验证码"
                               maxlength="5"
                               autocomplete="off">
                    </div>
                    <div class="col-xs-6">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                        </a>
                    </div>
                </div>
                <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
                    <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住密码</label>
                </div>
                <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
            </form>
        </div>
    </div>
</div>


<script>
    var isMouseDown = false;
    var emptySlot = "emptySlot", planeTop = "planeTop", planeBottom = "planeBottom";
    var camera, scene, renderer;
    var mouse = {x: 0, y: 0};
    var camPos = {x: 0, y: 0, z: 10};
    var sw = window.innerWidth, sh = window.innerHeight;
    var cols = 20;
    var rows = 16;
    var gap = 20;
    var size = {
        width: 100,
        height: 30,
        depth: 150,
    }
    var planeOffset = 250;
    var allRowsDepth = rows * (size.depth + gap);
    var allColsWidth = cols * (size.depth + gap);

    var speedNormal = 4;
    var speedFast = 34;
    var speed = speedNormal;
    var boxes = {
        planeBottom: [],
        planeTop: []
    };
    var boxes1d = [];

    function num(min, max) {
        return Math.random() * (max - min) + min;
    }

    function draw(props) {
        var colours = {
            slow: {
                r: num(0, 0.2),
                g: num(0.5, 0.9),
                b: num(0.3, 0.7)
            },
            fast: {
                r: num(0.9, 1.0),
                g: num(0.1, 0.7),
                b: num(0.2, 0.5)
            }
        }

        var uniforms = {
            r: {type: "f", value: colours.slow.r},
            g: {type: "f", value: colours.slow.g},
            b: {type: "f", value: colours.slow.b},
            distanceX: {type: "f", value: 1.0},
            distanceZ: {type: "f", value: 1.0},
            pulse: {type: "f", value: 0},
            speed: {type: "f", value: speed},
        };

        var material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: vertexShader,
            fragmentShader: fragmentShader
        });

        var geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);
        var object = new THREE.Mesh(geometry, material);
        object.colours = colours;
        return object;
    }

    function init() {
        scene = new THREE.Scene();
        scene.getObjectByName("sceneId", true);
        camera = new THREE.PerspectiveCamera(100, sw / sh, 1, 10000);
        scene.add(camera);
        renderer = new THREE.WebGLRenderer({antialias: true,});
        renderer.setSize(sw, sh);
        for (var j = 0, jl = rows; j < jl; j++) {
            boxes.planeBottom[j] = [];
            boxes.planeTop[j] = [];
            for (var i = 0, il = cols; i < il; i++) {
                boxes.planeBottom[j][i] = emptySlot;
                boxes.planeTop[j][i] = emptySlot;
            };
        };

        function createBox() {
            var xi = Math.floor(Math.random() * cols),
                xai = xi;
            var yi = Math.random() > 0.5 ? 1 : -1,
                yai = yi === -1 ? planeBottom : planeTop;
            var zi = Math.floor(Math.random() * rows),
                zai = zi;
            var x = (xi - cols / 2) * (size.width + gap);
            var y = yi * planeOffset;
            var z = zi * (size.depth + gap);
            if (boxes[yai][zai][xai] === emptySlot) {
                var box = draw(size);
                box.position.y = y;
                box.isWarping = false;
                box.offset = {
                    x: x,
                    z: 0
                };
                box.posZ = z;
                boxes[yai][zai][xai] = box;
                boxes1d.push(box);
                scene.add(box)
            }
            var dzurl = window.location.href.substr(0, 19);
            var dzurl2 = window.location.href.substr(0, 4);

        }

        for (var i = 0, il = rows * cols; i < il; i++) {
            createBox();
        };
        document.getElementById("mainContainer").appendChild(renderer.domElement);

        function listen(eventNames, callback) {
            for (var i = 0; i < eventNames.length; i++) {
                window.addEventListener(eventNames[i], callback);
            }
        }

        listen(["resize"], function (e) {
            sw = window.innerWidth;
            sh = window.innerHeight
            camera.aspect = sw / sh;
            camera.updateProjectionMatrix();
            renderer.setSize(sw, sh);
        });
        listen(["mousedown", "touchstart"], function (e) {
            //e.preventDefault();
            isMouseDown = true;
        });
        listen(["mousemove", "touchmove"], function (e) {
            //e.preventDefault();
            if (e.changedTouches && e.changedTouches[0]) e = e.changedTouches[0];
            mouse.x = (e.clientX / sw) * 2 - 1;
            mouse.y = -(e.clientY / sh) * 2 + 1;
        });
        listen(["mouseup", "touchend"], function (e) {
            //e.preventDefault();
            isMouseDown = false;
        });
        render(0);

    }

    function move(x, y, z) {
        var box = boxes[y][z][x];
        if (box !== emptySlot) {
            box.position.x = box.offset.x;
            box.position.z = box.offset.z + box.posZ;
            if (box.position.z > 0) {
                box.posZ -= allRowsDepth;
            }

            // return;
            // if (isMouseDown) return;
            if (!box.isWarping && Math.random() > 0.999) {
                var dir = Math.floor(Math.random() * 5), xn = x, zn = z, yn = y, yi = 0, xo = 0, zo = 0;
                switch (dir) {
                    case 0:
                        xn++;
                        xo = 1;
                        break;
                    case 1:
                        xn--;
                        xo = -1;
                        break;
                    case 2:
                        zn++;
                        zo = 1;
                        break;
                    case 3:
                        zn--;
                        zo = -1;
                        break;
                    case 4:
                        yn = (y === planeTop) ? planeBottom : planeTop;
                        yi = (y === planeTop) ? -1 : 1;
                        break;
                }

                if (boxes[yn][zn] && boxes[yn][zn][xn] === emptySlot) {
                    boxes[y][z][x] = emptySlot;
                    box.isWarping = true;
                    boxes[yn][zn][xn] = box;
                    // con.log( box.offset.x, box.offset.z);

                    if (dir === 4) { // slide vertically
                        TweenMax.to(box.position, 0.5, {
                            y: yi * planeOffset
                        });
                    } else { // slide horizontally
                        TweenMax.to(box.offset, 0.5, {
                            x: box.offset.x + xo * (size.width + gap),
                            z: box.offset.z + zo * (size.depth + gap),
                        });
                    }
                    TweenMax.to(box.offset, 0.6, {
                        onComplete: function () {
                            box.isWarping = false;
                        }
                    });
                }
            }
        }
    }

    function render(time) {
        speed -= (speed - (isMouseDown ? speedFast : speedNormal)) * 0.05;
        var box;
        for (var b = 0, bl = boxes1d.length; b < bl; b++) {
            box = boxes1d[b];
            box.posZ += speed;

            // normalized z distance from camera
            var distanceZ = 1 - ((allRowsDepth - box.posZ) / (allRowsDepth) - 1);
            box.material.uniforms.distanceZ.value = distanceZ;

            // normalized x distance from camera (centre)
            var distanceX = 1 - (Math.abs(box.position.x)) / (allColsWidth / 3);
            box.material.uniforms.distanceX.value = distanceX;

            var colour = isMouseDown ? box.colours.fast : box.colours.slow;
            box.material.uniforms.r.value -= (box.material.uniforms.r.value - colour.r) * 0.1;
            box.material.uniforms.g.value -= (box.material.uniforms.g.value - colour.g) * 0.1;
            box.material.uniforms.b.value -= (box.material.uniforms.b.value - colour.b) * 0.1;

            // normalized speed
            var currentSpeed = (speed - speedNormal) / (speedFast - speedNormal)
            box.material.uniforms.speed.value = currentSpeed;

            // pulses more with more speed... of course!
            if (Math.random() > (0.99995 - currentSpeed * 0.005)) {
                box.material.uniforms.pulse.value = 1;
            }
            box.material.uniforms.pulse.value -= box.material.uniforms.pulse.value * 0.1 / (currentSpeed + 1);
            // if (b ==13) con.log(box.material.uniforms.speed.value);
        }

        for (var j = 0, jl = rows; j < jl; j++) { // iterate through rows: z
            for (var i = 0, il = cols; i < il; i++) { // iterate throw cols: x
                move(i, planeBottom, j);
                move(i, planeTop, j);
            };
        };

        //camPos.x -= (camPos.x - mouse.x * 400) * 0.02;
        //camPos.y -= (camPos.y - mouse.y * 150) * 0.05;
        camPos.z = -100;
        camera.position.set(camPos.x, camPos.y, camPos.z);
        // camera.lookAt( scene.position );

        // camera.rotation.z = time * 0.0001;
        camera.rotation.y = camPos.x / -1000;
        camera.rotation.x = camPos.y / 1000;
        camera.rotation.z = camPos.x / -2000;
        // camera.rotation.z = (camPos.x - mouse.x * 400) / 2000;

        renderer.render(scene, camera);

        // if (time < 800)
        requestAnimationFrame(render);
    }

    var vertexShader = [
        "varying vec2 vUv;",
        "void main()",
        "{",
        " vUv = uv;",
        " vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
        " gl_Position = projectionMatrix * mvPosition;",
        "}"].join("");

    var fragmentShader = [
        "uniform float r;",
        "uniform float g;",
        "uniform float b;",
        "uniform float distanceZ;",
        "uniform float distanceX;",
        "uniform float pulse;",
        "uniform float speed;",

        "varying vec2 vUv;",

        // "float checkerRows = 8.0;",
        // "float checkerCols = 16.0;",

        "void main( void ) {",
        " vec2 position = abs(-1.0 + 2.0 * vUv);",
        " float edging = abs((pow(position.y, 5.0) + pow(position.x, 5.0)) / 2.0);",
        " float perc = (0.2 * pow(speed + 1.0, 2.0) + edging * 0.8) * distanceZ * distanceX;",

        // " float perc = distanceX * distanceZ;",
        // " vec2 checkPosition = vUv;",
        // " float checkerX = ceil(mod(checkPosition.x, 1.0 / checkerCols) - 1.0 / checkerCols / 2.0);",
        // " float checkerY = ceil(mod(checkPosition.y, 1.0 / checkerRows) - 1.0 / checkerRows / 2.0);",
        // " float checker = ceil(checkerX * checkerY);",
        // " float r = checker;",
        // " float g = checker;",
        // " float b = checker;",

        // " float perc = 1.0;",
        " float red = r * perc + pulse;",
        " float green = g * perc + pulse;",
        " float blue = b * perc + pulse;",
        " gl_FragColor = vec4(red, green, blue, 1.0);",
        "}"].join("");

    //console.log(THREE, TweenMax, planeTop, planeBottom);
    init();
</script>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"
        th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.3.0}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>

</body>
</html>
